<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css3 transition 与 transform</title>
  <style>
      .box {
          width: 100px;
          background: #92B901;
          color: #ffffff;
          position: absolute;
          font-weight: bold;
          font-size: 16px;
          padding: 10px;
          float: left;
          margin: 5px;
          transition-property: width, height, transform, background, opacity;
          transition-duration: 1s,1s,1s,1s,1s,1s;
          border-radius: 5px;
          opacity: 0.4;
      }
      .box:hover {
          background-color: orange;
          opacity: 1;
          transform: translate(50px, 50px) scale(1.5) rotate(720deg) ;
      }
  </style>
</head>
<body>
<div class="box">css3 transition 与 transform</div>

</body>
</html>

<div class="box"></div>
<style>
    .box {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: olivedrab;
        opacity: 0.4;
        /* 过渡属性，可以写多个 */
        transition-property: background-color, opacity;
        /* 过渡花费时间 */
        transition-duration: 0.5s
    }
    .box:hover {
        background-color: green;
        opacity: 1;
    }
</style>
